<script setup lang="ts">
import { PropType, ref } from 'vue'

type FileItem = {
	name: string, // 文件名称
	size: string, // 大小
	url: string,	 // 文件地址
	status: string, // 上传状态
}
const props = defineProps({
  fileList: {
    type: Array as PropType<FileItem[]>,
    default: () => []
  }
})

// const fileList = ref<FileItem[]>([
//   {
//     name: '文件1.xlsx',
//     size: '100KB',
//     url: '',
//     status: 'success',
//   },
//   {
//     name: '文件3.pdf',
//     size: '100KB',
//     url: '',
//     status: 'success',
//   },
//   {
//     name: '文件3.docx',
//     size: '100KB',
//     url: '',
//     status: 'success',
//   }
// ])


function iconType(item: any) {
	console.log(item, 'item')
	if(item.name.endsWith('.xlsx') || item.name.endsWith('.xls')){
		return 'excel'
	} else if(item.name.endsWith('.docx') || item.name.endsWith('.doc')){
		return 'word'
	} else if(item.name.endsWith('.pdf')){
		return 'pdf'
	}
	return ''
}
</script>
<template>
	<div class="file-list" v-if="props.fileList.length > 0">
		<div class="item" v-for="(f, index) in props.fileList">
			<img
				v-if="iconType(f) === 'excel'"
				class="icon)"
				alt="xlsx"
				src="data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1743389266834'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='5518'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='200'%20height='200'%3e%3cpath%20d='M910.2336%201024H113.7664C51.2%201024%200%20972.8%200%20910.2336V113.7664C0%2051.2%2051.2%200%20113.7664%200h796.4672C972.8%200%201024%2051.2%201024%20113.7664v796.4672C1024%20972.8%20972.8%201024%20910.2336%201024z%20m-152.2688-210.816L567.04%20509.4656l188.2368-298.6752h-89.088l-124.416%20206.5152a494.336%20494.336%200%200%200-22.9376%2044.7232h-1.5616a415.5392%20415.5392%200%200%200-20.992-42.7776l-119.0144-208.4608h-95.2576l184.32%20299.8528-200.2688%20302.5408h94.8736l138.4448-226.304c8.832-18.944%2013.4912-29.44%2014.0032-31.488h1.9456c5.9904%2015.5136%2010.496%2025.9072%2013.6192%2031.0784l134.5536%20226.7136h94.4896z'%20fill='%23039E55'%20p-id='5519'%3e%3c/path%3e%3c/svg%3e"
			/>

			<img
				v-if="iconType(f) === 'word'"
				alt="docx"
				src="data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1742889644898'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='5095'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='200'%20height='200'%3e%3cpath%20d='M594.944%200l335.12448%20341.31968v563.2c0%2065.9968-52.50048%20119.48032-117.29408%20119.48032H209.54624c-64.7936%200-117.2992-53.5296-117.2992-119.48032V119.48032C92.25216%2053.48352%20144.75776%200%20209.55136%200H594.944z'%20fill='%235895FF'%20p-id='5096'%3e%3c/path%3e%3cpath%20d='M930.06848%20341.31968h-211.9168c-64.74752%200-123.20768-59.48928-123.20768-125.4912V0l335.12448%20341.31968z'%20fill='%23FFFFFF'%20fill-opacity='.4'%20p-id='5097'%3e%3c/path%3e%3cpath%20d='M427.37664%20725.31968V768H259.8144v-42.68032h167.56224zM594.944%20640v42.68032H259.8144V640H594.944z%20m0-85.31968v42.63936H259.8144v-42.63936H594.944z%20m0-85.36064V512H259.8144v-42.68032H594.944z'%20fill='%23FFFFFF'%20p-id='5098'%3e%3c/path%3e%3c/svg%3e"
			/>

			<img
				v-if="iconType(f) === 'pdf'"
				alt="pdf"
				src="data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1742889556591'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='3030'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='200'%20height='200'%3e%3cpath%20d='M910.2336%201024H113.7664C51.2%201024%200%20972.8%200%20910.2336V113.7664C0%2051.2%2051.2%200%20113.7664%200h796.4672C972.8%200%201024%2051.2%201024%20113.7664v796.4672C1024%20972.8%20972.8%201024%20910.2336%201024zM155.2128%20555.4432h44.672c35.9936%201.2032%2066.0224-8.704%2089.984-29.6704%2024.0128-20.9664%2036.0192-48.3328%2036.0192-82.1248%200-33.28-10.24-58.9568-30.7712-76.8768-20.5312-17.92-49.3568-26.88-86.5536-26.88h-97.792v344.2432h44.4416v-128.6912z%20m0-176.4352h45.3376c52.48%200%2078.6688%2022.1184%2078.6688%2066.432%200%2022.8096-7.04%2040.3456-21.12%2052.5824-14.08%2012.1856-34.6624%2018.304-61.7728%2018.304H155.2128v-137.3184z%20m234.0352%20305.1008h94.6432c54.528%200%2099.072-16.0768%20133.6576-48.2048%2034.6112-32.1536%2051.8912-74.9056%2051.8912-128.256%200-51.0976-17.28-91.8528-51.8912-122.2144-34.56-30.336-77.952-45.568-130.0992-45.568h-98.2016v344.2432z%20m44.416-304.6656h51.9936c41.0624%200%2074.1632%2010.8032%2099.328%2032.4608%2025.216%2021.6064%2037.7856%2053.888%2037.7856%2096.8704%200%2043.008-12.2368%2076.3392-36.7872%20100.224-24.5248%2023.8592-58.624%2035.7632-102.3232%2035.7632H433.664V379.4432z%20m479.5648%200v-39.5776h-177.3312v344.2432h44.4416v-150.4512h123.1104V494.592h-123.136v-115.1232h132.9152z'%20fill='%23D93838'%20p-id='3031'%3e%3c/path%3e%3c/svg%3e"
			/>

			<div class="card-right">
				<div class="file-name">{{ f.name }}</div>
				<div class="file-size">{{ f.size }}</div>
			</div>

			<span class="close" role="button" @click="handleDelFile({})">
				<svg
					viewBox="0 0 24 24"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
					width="1em"
					height="1em"
					focusable="false"
					aria-hidden="true"
				>
					<path
						d="M17.66 19.78a1.5 1.5 0 0 0 2.12-2.12L14.12 12l5.66-5.66a1.5 1.5 0 0 0-2.12-2.12L12 9.88 6.34 4.22a1.5 1.5 0 1 0-2.12 2.12L9.88 12l-5.66 5.66a1.5 1.5 0 0 0 2.12 2.12L12 14.12l5.66 5.66Z"
						fill="currentColor"
					></path>
				</svg>
			</span>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.file-list {
	max-height: 200px;
	overflow-y: auto;
	border-radius: 20px;
	padding: 16px;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 10px;
	.item {
		display: flex;
		align-items: center;
		position: relative;
		height: 52px;
		background-color: #eaeef7;
		border-radius: 4px;
		padding: 5px;
		width: 185px;
		gap: 4px;
		img {
			width: 30px;
			height: 30px;
		}
		.file-name {
			width: 100px;
			font-size: 12px;
			color: #000;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.file-size {
			font-size: 12px;
			color: #c0c0c0;
			margin-top: 5px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.close {
			position: absolute;
			top: -7px;
			right: -7px;
			width: 14px;
			height: 14px;
			background: #bfbfbf;
			border-radius: 50%;
			cursor: pointer;
			line-height: 14px;
			text-align: center;
			opacity: 0;
			svg {
				color: #fff;
				font-size: 12px;
			}
		}
		&:hover {
			.close {
				opacity: 1;
			}
		}
	}
}
</style>
